<template>
  <div class="detail-container">
    <div>
      <TitleComponent title="基础信息" />
      <div class="task-info">
        <div>
          <span class="task-label">任务名称：</span>
          <span>{{ taskInfo.taskName }}</span>
        </div>
        <div>
          <span class="task-label">建议实施时间：</span>
          <span>{{ taskInfo.startTime }}</span>
        </div>
        <div>
          <span class="task-label">实际完成时间：</span>
          <span>{{ taskInfo.completedTime }}</span>
        </div>
        <div>
          <span class="task-label">提交人：</span>
          <span>{{ taskInfo.completedUser }}</span>
        </div>
      </div>
    </div>

    <div class="input-tip">
      <span class="tip-label">录入提示：</span>
      <span>{{ taskInfo.suggestion }}</span>
    </div>

    <div class="voice-record">
      <TitleComponent title="语音记录" />
      <el-tag type="info" class="voice-content">{{ transcript }}</el-tag>
    </div>
    <div class="ai-summary">
      <TitleComponent title="AI智能总结" />
      <el-timeline>
        <el-timeline-item timestamp="病虫害调查报告" placement="top">
          {{ summaryText }}
        </el-timeline-item>
        <el-timeline-item timestamp="AI诊断" placement="top">
          <div class="ai-diagnosis">
            <p>诊断结果：{{ aiSummary.conclusion }}</p>
            <p>防治方案：{{ aiSummary.solution }}</p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="scene-pics">
      <div style="display: flex">
        <TitleComponent title="现场图片" />
        <div style="margin-left: 20px">(可点击查看大图)</div>
      </div>
      <ImagePopupZoom :pics="pics" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ImagePopupZoom from "@/components/ImagePopupZoom.vue";
import TitleComponent from "@/components/TitleComponent.vue";
// 模拟数据
const taskInfo = ref({
  taskName: "病虫害调查",
  startTime: "2025-08-10 08:00",
  completedTime: "2025-08-10 10:00",
  completedUser: "张三",
  suggestion: "请针对2号棚完成病虫害调查，需包括xxxxxxx。例如：xxxx。",
});

const transcript = ref(
  "今天，对B7地块的蓝莓进行了病虫害移动点调查，在17排、23行的移动点发现花序、幼果、果柄、新梢、叶片等部位出现灰色霉层，组织枯萎。"
);

const summaryText =
  " 日期：2025年09月11日\n基地：测试农场1 \n位置：3号地块，5号棚 \n观察内容：10株红蜘蛛 操作人：植保主管";
const aiSummary = ref({
  conclusion: "当前情况应属于【蓝莓僵果病】。",
  solution: "1、农业防治：清除病株残体。2、药剂防治：使用代森锰锌、多菌灵等。",
});

const pics = ref([
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
]);
</script>

<style scoped>
.detail-container {
  padding: 20px;
}
.task-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 16px;
  > div {
    width: 270px;
  }
}
.task-label {
  font-weight: bold;
  margin-right: 8px;
}
.input-tip {
  margin-bottom: 16px;
}
.tip-label {
  font-weight: bold;
  margin-right: 8px;
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  margin: 16px 0;
  display: block;
}
.voice-content {
  display: block;
  margin-bottom: 16px;
}
.report {
  margin-bottom: 16px;
  white-space: pre-line;
  /* 可选：增加行高，优化显示效果 */
  line-height: 3;
}
.report-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.ai-diagnosis {
  background-color: #f0f9eb;
  padding: 10px;
  border-radius: 4px;
  margin-top: 8px;
}
.diagnosis-title {
  font-weight: bold;
  margin-bottom: 6px;
}
.pics-container {
  display: flex;
  flex-wrap: wrap;
}
.pics-container {
  margin: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* 图片间距 */
}
</style>
